import { Node } from "@tiptap/core";

const Video = Node.create({
  name: "audio",

  group: "block",
  selectable: true,
  atom: true,

  addAttributes() {
    return {
      src: {
        default: null,
        parseHTML: (element) => element.getAttribute("src"),
      },
    };
  },

  parseHTML() {
    return [
      {
        tag: "div.video-wrapper",
        getAttrs: (node) => {
          if (node && node.nodeType === 1 && node.tagName === "DIV") {
            const audioElement = node.querySelector("audio");
            if (audioElement) {
              const src = audioElement.getAttribute("src");
              if (src) {
                return { src };
              }
            }
          }
          return false;
        },
      },
    ];
  },

  renderHTML({ HTMLAttributes }) {
    const videoAttributes = {
      ...HTMLAttributes,
      controls: true,
    };

    return [
      "div",
      {
        class: "video-wrapper",

      },
      ["audio", videoAttributes],
    ];
  },
});

export default Video;
